<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>ws测试</title>
    <style>

        #content {
            width: 100%;
            height: 400px;
            border: 1px solid black;
            overflow: auto;
        }

    </style>
</head>
<body>
<main>

    <div id="content">1</div>

    <div class="bottom">
        <input type="text" id="name" placeholder="昵称">
        <button id="button-open">进入聊天室</button>
        <button id="button-close">退出聊天室</button>
        <input type="text" id="text">
        <button id="button-send">发送</button>
    </div>


</main>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var ws = null;

    function setup_logined(is_login) {
        if (is_login) {
            document.getElementById('button-open').style.display = 'none';
            document.getElementById('button-close').style.display = 'inline-block';
            document.getElementById('name').readOnly = 'readOnly';

        } else {
            document.getElementById('button-open').style.display = 'inline-block';
            document.getElementById('button-close').style.display = 'none';
            document.getElementById('name').readOnly = '';
        }
    }

    setup_logined(false);


    document.getElementById('button-open').onclick = function (event) {
        if (ws) {
            return;
        }
        ws = new WebSocket('ws://127.0.0.1:5002/echo');
        setup_logined(true)

        var name = document.getElementById('name').value;

        ws.onopen = function () {
            console.log('web socket 已连接');
            ws.send(JSON.stringify({'type': 'open', 'data': {'name': name}}));
        }
        ws.onmessage = function (event) {
            var r_data = event.data; //接收到的数据
            show_message(r_data);
        }
        ws.onclose = function () {
            //alert('连接已关闭...');
        }
    }
    document.getElementById('button-close').onclick = function (event) {
        ws.close();
        ws = null;
        setup_logined(false);
    }


    function show_message(json_string) {
        var json = JSON.parse(json_string);
        var type = json.type;
        var data = json.data;
        var html = '';
        if (type === 'enter') {
            html = '<div style="color:green;">' + data.name + ' 进来了！</div>';
        } else if (type === 'leave') {
            html = '<div style="color:red;">' + data.name + ' 黯然离去！</div>';
        } else if (type === 'say') {
            console.log(data)
            html = '<div>' + data.name + ' 说：<br/>' + data.content + '</div>';
        }
        {#$('#content').scrollIntoView();#}

        var div = document.getElementById('content')
        div.innerHTML += html;
        div.scrollTop = div.scrollHeight;
    }


    function send_message() {
        if (!ws) {
            alert('请先进入聊天室');
            return;
        }
        var text = document.getElementById('text').value;
        ws.send(JSON.stringify({'type': 'say', 'data': {'content': text}}));
        var div = document.getElementById('content')
        div.innerHTML += '<div>我:<br/>' + text + '</div>';
        div.scrollTop = div.scrollHeight;
    }

    document.getElementById('button-send').onclick = function (event) {
        send_message();
    }
    document.getElementById('text').onkeypress = function (event) {
        if ((event.which || e.keyCode) == 13) {
            send_message();
            event.preventDefault();
        }

    }


</script>
</body>
</html>